<template>
  <div class="detail-shop" v-if="Object.keys(goods).length !==0">
    <div class="shop-top">
      <img :src="goods.shopInfo.shopLogo" alt="" class="shop-img">
      <div class="shop-name">{{goods.shopInfo.name}}</div>
    </div>
    <div class="score">
      <div v-for="(item,index) in goods.shopInfo.score" :key="index" class="item">
        <span class="score-name">{{item.name}}</span>
        <span class="score-s" :class="{green:item.score<4.8}">{{item.score}}</span>
        <span v-if="item.score>4.8" class="np">高</span>  
        <span v-else-if="item.score<4" class="low">低</span>
        <span v-else class="low">中</span>
      </div>
    </div>
    <div class="sells">
      <div class="sells-top">{{goods.shopInfo.cSells}}</div>
      <div class="sells-bottom">销量</div>
    </div>
    <div class="goods">
      <div>{{goods.shopInfo.cGoods}}</div>
      <div>全部宝贝</div>
    </div>
    <div style="clear:both" ></div>
  </div>
</template>

<script>
export default {
  name: 'Detailshop',

  data() {
    return {
      nice:{
        type:Boolean,
        default:true
      }
    };
  },
  props:{
    goods:{

    }
  },
  mounted() {
    
  },

  methods: {
    aaa(){
      console.log(this.goods);
    },
    // Sells(){
    //   return this.
    // }
  },
};
</script>

<style lang="css" scoped>
.shop-top{
  margin-top: 30px;
  height: 60px;
  line-height: 60px;
  /* border: 1px solid black; */
  margin-left: 30px;
  position: relative;
}
.shop-img{
  width: 60px;
}
.shop-name{
  display: inline-block;
  position: absolute;
  top: 5%;
  color: #999;
  margin-left: 5px;
}
.score{
  margin-top: 15px;
  margin-right: 30px;
  font-size: 14px;
  float: right;
}
.score-s{
  margin-left: 10px;
  display: inline-block;
  /* text-align: center; */
  color: red;
  width: 40px;
}
.item{
  margin-top: 5px;
}
.low{
  background-color: green;
  color: #fff;
}
.np{
  background: red;
  color: #fff;
}
.green{
  color: green;
}
.sells,.goods{
  float: left;
  font-size: 5vw;
  text-align: center;
  margin-left:15px;
  margin-top: 25px;
  width: 21vw;
}
.goods{
  border-right: 3px solid #999;
}
</style>